<template>
  <div class="system-config-container">
    <el-card class="config-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">系统配置管理</span>
          <el-button type="primary" @click="handleSave" :loading="saving">
            保存配置
          </el-button>
        </div>
      </template>

      <el-form ref="configForm" :model="configForm" :rules="configRules" label-width="120px">
        <!-- 系统基本信息 -->
        <el-divider content-position="left">系统基本信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="系统名称" prop="systemName">
              <el-input v-model="configForm.systemName" placeholder="请输入系统名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="系统版本" prop="systemVersion">
              <el-input v-model="configForm.systemVersion" placeholder="请输入系统版本" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="系统Logo" prop="systemLogo">
              <el-input v-model="configForm.systemLogo" placeholder="请输入系统Logo URL" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="系统描述" prop="systemDescription">
              <el-input v-model="configForm.systemDescription" placeholder="请输入系统描述" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 安全配置 -->
        <el-divider content-position="left">安全配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="密码最小长度" prop="passwordMinLength">
              <el-input-number v-model="configForm.passwordMinLength" :min="6" :max="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码复杂度" prop="passwordComplexity">
              <el-select v-model="configForm.passwordComplexity" placeholder="请选择密码复杂度">
                <el-option label="低" value="low" />
                <el-option label="中" value="medium" />
                <el-option label="高" value="high" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="登录失败锁定" prop="loginFailLock">
              <el-switch v-model="configForm.loginFailLock" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="失败次数限制" prop="loginFailCount" v-if="configForm.loginFailLock">
              <el-input-number v-model="configForm.loginFailCount" :min="3" :max="10" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="会话超时时间" prop="sessionTimeout">
              <el-input-number v-model="configForm.sessionTimeout" :min="30" :max="480" />
              <span class="unit-text">分钟</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="验证码开关" prop="captchaEnabled">
              <el-switch v-model="configForm.captchaEnabled" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 业务配置 -->
        <el-divider content-position="left">业务配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="默认物业费" prop="defaultPropertyFee">
              <el-input-number v-model="configForm.defaultPropertyFee" :min="0" :precision="2" />
              <span class="unit-text">元/㎡</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="默认水费" prop="defaultWaterFee">
              <el-input-number v-model="configForm.defaultWaterFee" :min="0" :precision="2" />
              <span class="unit-text">元/吨</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="默认电费" prop="defaultElectricityFee">
              <el-input-number v-model="configForm.defaultElectricityFee" :min="0" :precision="2" />
              <span class="unit-text">元/度</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="默认燃气费" prop="defaultGasFee">
              <el-input-number v-model="configForm.defaultGasFee" :min="0" :precision="2" />
              <span class="unit-text">元/立方米</span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 通知配置 -->
        <el-divider content-position="left">通知配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="邮件通知" prop="emailNotification">
              <el-switch v-model="configForm.emailNotification" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="短信通知" prop="smsNotification">
              <el-switch v-model="configForm.smsNotification" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="微信通知" prop="wechatNotification">
              <el-switch v-model="configForm.wechatNotification" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="系统通知" prop="systemNotification">
              <el-switch v-model="configForm.systemNotification" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 其他配置 -->
        <el-divider content-position="left">其他配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="数据备份" prop="dataBackup">
              <el-switch v-model="configForm.dataBackup" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备份频率" prop="backupFrequency" v-if="configForm.dataBackup">
              <el-select v-model="configForm.backupFrequency" placeholder="请选择备份频率">
                <el-option label="每日" value="daily" />
                <el-option label="每周" value="weekly" />
                <el-option label="每月" value="monthly" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="系统维护" prop="systemMaintenance">
              <el-switch v-model="configForm.systemMaintenance" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维护时间" prop="maintenanceTime" v-if="configForm.systemMaintenance">
              <el-time-picker v-model="configForm.maintenanceTime" format="HH:mm" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { showSuccess, showError } from '@/utils/message'
import type { FormInstance, FormRules } from 'element-plus'

// 作者：Wu.Liang
// 系统配置管理组件

const configForm = reactive({
  // 系统基本信息
  systemName: '智慧社区管理系统',
  systemVersion: 'v1.0.0',
  systemLogo: '',
  systemDescription: '基于微服务架构的现代化社区管理平台',
  
  // 安全配置
  passwordMinLength: 8,
  passwordComplexity: 'medium',
  loginFailLock: true,
  loginFailCount: 5,
  sessionTimeout: 120,
  captchaEnabled: true,
  
  // 业务配置
  defaultPropertyFee: 2.5,
  defaultWaterFee: 3.2,
  defaultElectricityFee: 0.6,
  defaultGasFee: 2.8,
  
  // 通知配置
  emailNotification: true,
  smsNotification: true,
  wechatNotification: true,
  systemNotification: true,
  
  // 其他配置
  dataBackup: true,
  backupFrequency: 'daily',
  systemMaintenance: false,
  maintenanceTime: null
})

const configRules: FormRules = {
  systemName: [
    { required: true, message: '请输入系统名称', trigger: 'blur' }
  ],
  systemVersion: [
    { required: true, message: '请输入系统版本', trigger: 'blur' }
  ],
  passwordMinLength: [
    { required: true, message: '请设置密码最小长度', trigger: 'blur' }
  ],
  passwordComplexity: [
    { required: true, message: '请选择密码复杂度', trigger: 'change' }
  ]
}

const configFormRef = ref<FormInstance>()
const saving = ref(false)

// 获取系统配置
const getSystemConfig = async () => {
  try {
    // TODO: 调用后端API获取系统配置
    // const response = await systemConfigApi.getSystemConfig()
    // Object.assign(configForm, response.data)
  } catch (error) {
    console.error('获取系统配置失败:', error)
  }
}

// 保存系统配置
const handleSave = async () => {
  if (!configFormRef.value) return
  
  try {
    await configFormRef.value.validate()
    saving.value = true
    
    // TODO: 调用后端API保存系统配置
    // await systemConfigApi.saveSystemConfig(configForm)
    
    showSuccess('系统配置保存成功')
  } catch (error) {
    console.error('保存系统配置失败:', error)
    showError('保存失败，请重试')
  } finally {
    saving.value = false
  }
}

// 组件挂载时获取配置
onMounted(() => {
  getSystemConfig()
})
</script>

<style scoped>
.system-config-container {
  padding: 20px;
}

.config-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.unit-text {
  margin-left: 8px;
  color: #909399;
  font-size: 14px;
}

.el-divider {
  margin: 24px 0 16px 0;
}

.el-divider__text {
  font-weight: 600;
  color: #409eff;
}
</style> 